<template>
	<view class="exinfo">

		<view class="pla-body">
			<view class="infosetting">
				<text>报名信息</text>
				<text style="color: #FF5F49;">{{formData.status_text}}</text>
			</view>
			<view class='img-list'>
				<view class="pla-img">
					<image :src="formData.image"></image>
				</view>
				<view class="pla-info">
					<view class="ply-name">{{formData.title}}</view>
					<view style="color: #999999;font-size: 12px;">活动日期：{{formData.activity.act_start}}至{{formData.activity.act_end}}</view>
					<view class="re-num">
						<text>￥{{formData.payment}}</text>
						<text style="color: #999999;">x1</text>
					</view>
				</view>
			</view>
			<view class="count">
				<view style="font-size: 12px;">总额</view>
				<view style="font-size: 12px;">￥{{formData.payment}}</view>
			</view>
			<!-- <view class="count" style="padding-bottom: 10px;">
				<view style="font-size: 12px;">优惠</view>
				<view style="font-size: 12px;">0</view>
			</view> -->
			<view class="count" style="padding: 10px;border-top: 1px solid #EFEFF4;">
				<view style="font-size: 13px;color: #333333;">实付款</view>
				<view style="font-size: 13px;color: #333333;">￥{{formData.payment}}</view>
			</view>
		</view>

		<view class="re-user">
			<view style="color: #333333;">用户信息</view>
			<view style="color: #666666;font-size: 12px;">家长姓名：
				<text style="color: #333333;">{{formData.parent_name}}</text>
			</view>
			<view style="color: #666666;font-size: 12px;">手机：
				<text style="color: #333333;">{{formData.parent_tel}}</text>
			</view>
			<view style="color: #666666;font-size: 12px;">孩子姓名：
				<text style="color: #333333;">{{formData.child_name}}</text>
			</view>
			<view style="color: #666666;font-size: 12px;">孩子年龄：
				<text style="color: #333333;">{{formData.child_age}}</text>
			</view>
		</view>

		<view class="re-user">
			<view style="color: #333333;">活动详情</view>
			<view style="color: #666666;font-size: 12px;">活动名称：
				<text style="color: #333333;">{{formData.activity.title}}</text>
			</view>
			<view style="color: #666666;font-size: 12px;">活动地点：
				<text style="color: #333333;">{{formData.activity.address}}</text>
			</view>
		</view>
		
		<view class="re-user">
			<view style="color: #333333;">订单信息</view>
			<view style="color: #666666;font-size: 12px;">订单编号：
				<text style="color: #333333;">{{formData.order_no}}</text>
			</view>
			<view style="color: #666666;font-size: 12px;">付款时间：
				<text style="color: #333333;">{{formData.create_time}}</text>
			</view>
		</view>


		<view class="no-but" v-if="formData.status==0">
			<view class="ex-no" @click="hanldNo()">取消报名</view>
		</view>

		<view class="no-but" v-if="formData.status==1" style="background: none;">
			<view class="init-but"  @click="getMiniScene()">
				<view class="but-apply">分享海报</view>
			</view>
			
			<!-- <view class="ex-no" @click="getMiniScene()">分享海报</view> -->
		</view>

		<!--分享弹框-->
		<uni-popup ref="popuphy" type="center" :maskClick="false">
			<view class="hun-wrapper">
				<view class="huany">
					<view class="hun-body">
						<image :src="srcImg" class="hu-bg"></image>
						<!-- <limePainter v-if="isShowPainter" isRenderImage custom-style="display: table-cell;text-align: center;vertical-align: middle;" :board="base" @success="path = $event"  v-on:childByValue="childByValue"></limePainter> -->
						<image src="../../static/images/gb.png" class="guan-img" @click="hanldNoGood()"></image>
					</view>
				</view>

			</view>

			<view class="hun-but">
				<view class="hun-we">
					<button class="btn activ-share-but" open-type="share" style="padding: 0;margin: 0;">
						<image src="../../static/images/fenx.png" class="hun-img"></image>

						<view style="margin-top: 10px;">分享好友</view>
					</button>
				</view>
				<view class="hun-we">
					<image src="../../static/images/xiazai.png" class="hun-img" @click="downloadImageOfMp(srcImg)"></image>
					<view>保存图片</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				formData: {},
				id: "",
				
				 info:"",
				 seveAlt:false,
				 act_id:"",
				img:"",
				title:"",
				srcImg:"",//二维码
				status:"",//订单状态
				act:"",//活动id
				weichecked:true
			}
		},

		components: {
			uniPopup
		},

		onLoad(option) {
			if (option.address) {
				console.log(option.address)
				let aa = option.address;
				let bb = decodeURIComponent(aa)
				this.formData = JSON.parse(bb);
				this.id = option.id
				console.log(this.formData)
			}

		},
		
		onShareAppMessage() {
			return {
				title: this.formData.title,
				imageUrl: this.formData.img,
				path: `/pages/find/activityInfo?address=${this.formData.act_id}` 
			}
			// this.$common.navigateTo('/pages/classify/productList?indexId='+indexId+'&title=电器');
			console.log(path)
		},
		methods: {

			getMiniScene() {
				const params = {
					act: this.formData.act_id,
				}
				this.$http.get('/wechat/miniScene', {
					params: params
				}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code == 0) {
						this.srcImg = res.data.src;
						if (this.status !== 0 && this.srcImg != '') {
							let that = this;
							that.$refs.popuphy.open();
						}
					}
				})
			},
			
			//关闭
			hanldNoGood(){
				this.$refs.popuphy.close();
			},
			downloadImageOfMp(image) {
				let _this = this
			
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								});
							},
							fail() {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					},
					fail() {
						_this.$common.errorToShow('下载失败')
					}
				})
			},
			

			hanldShare() {
				uni.navigateTo({
					url: '/pages/user/shareTheDry'
				})
			},
			//取消报名
			hanldNo() {
				const formData = {
					id: this.formData.id,
				}
				this.$http.post('/activity/cancel', formData).then((response) => {
					const res = response.data;
					if (res.code == 0) {
						console.log(res)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						let that = this;
						setTimeout(function() {
							// uni.navigateBack()
							uni.navigateTo({
								url: `/pages/user/regiIist?id=${that.id}`
							})
						}, 1000);
					}
				})
			},
		}
	}
</script>

<style>
	.exinfo {
		width: 100%;
	}

	.info-title {
		font-size: 21px;
		color: #FF5F49;
		padding: 24px;
		background-color: #FFFFFF;
		text-align: center;
	}

	.info-title image {
		width: 30px;
		height: 30px;
		vertical-align: text-top;
	}

	/**/
	.pla-body {
		margin: 10px 16px 10px 16px;
		border-radius: 4px;
		background-color: #fff;
	}

	.img-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.pla-img {
		margin: 10px;
	}

	.pla-img image {
		width: 90px;
		height: 90px;
		border-radius: 4px;
	}

	.infosetting {
		padding: 12px 10px;
		border-bottom: 1px solid #EFEFF4;
		color: #999999;
		font-size: 13px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.pla-num {
		width: 105px;
		padding-top: 10px;
		text-align: right;
		padding-right: 10px;
	}

	.ply-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333333;
		font-weight: bold;
		font-size: 12px;
	}

	.pla-info {
		width: 480upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-right: 10px;
	}

	.count {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #999999;
		padding: 0 10px;
	}

	.red-price {
		font-size: 16px;
	}

	.no-but {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 15px;
		justify-content: flex-end;
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.ex-no {
		width: 158upx;
		height: 60upx;
		border-radius: 30px;
		border: 1px solid rgba(239, 239, 244, 1);
		color: #333333;
		line-height: 58upx;
		text-align: center;
		font-size: 13px;
		margin-right: 10px;
	}

	.ex-yes {
		width: 158upx;
		height: 60upx;
		border-radius: 30px;
		border: 1px solid rgba(255, 95, 73, 1);
		color: #FF5F49;
		line-height: 58upx;
		text-align: center;
		font-size: 13px;
	}

	.re-num {
		color: #666666;
		font-size: 12px;
		padding-top: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.re-user {
		background-color: #fff;
		padding: 10px;
		border-radius: 4px;
		margin: 10px 17px;
	}
	/**/
		.hun-wrapper{
			display: flex;
			flex-direction: column;
		}
		.hun-but{
			height: 127px;
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			bottom: 0;
			z-index: 99999999999;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			left: 0;
		}
		.hun-body{
	margin-top: -100px;
	position: relative;
	
		}
		.guan-img{
			position: absolute;
			right: 20rpx;
			top:20rpx;
			z-index: 9999999999;
			width: 24px;
			height: 24px;
		}
		.hu-bg{
			height: 800upx;
			width: 590upx;
		}
		.guan-img{
			
		}
		.hun-img{
			width: 50px;
			height: 50px;
		}
		.activ-share-but{
			background: none;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: center;
				line-height: inherit;
		}
		
		.init-but{
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
		}
		.but-apply{
			
			background: #FF5F49;
			border-radius: 5px;
			height: 44px;
			margin: 30px 37px;
			color: #fff;
			text-align: center;
			line-height: 44px;
		}
		.init-but{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		.but-apply{
			
			background: #FF5F49;
			border-radius: 5px;
			height: 44px;
			margin: 30px 37px;
			color: #fff;
			text-align: center;
			line-height: 44px;
		}
</style>
